﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Hotnet.Web.Utility.ReferenceVideoControl>" %>
	
	<% if(Model.VideoListStyle== EnumVideoListStyle.vertical){ %>
		<link href="/Css/ReferenceVideoControlStyle1.css" rel="stylesheet" type="text/css" />
	<%} %>
	<% if(Model.VideoListStyle== EnumVideoListStyle.horizontal){ %>
		<link href="/Css/ReferenceVideoControlStyle2.css" rel="stylesheet" type="text/css" />
	<%} %>

	<div class="refTagVideo" id="divRefTagVideo">
		<div class="moduleTitle">
				<span><%=string.IsNullOrEmpty(Model.ModuleTitle)?"相关推荐":Model.ModuleTitle %></span>
				<a href="<%=Model.MoreLink %>" target="_blank" style="color:rgb(255, 0, 153)" class="browseMore">更多</a>
		</div>
		<div style=" margin-top:10px;">
		</div>
		<ul class="gallery">
		<%for (int i = 0; i < (Model.ReferenceVideos == null ? i = -1 : Model.ReferenceVideos.Count()); i++)
		{%>
			<li>
				<a href="<%=VideoHelper.GetPlayUrl(Model.ReferenceVideos[i]) %>">
					<img src='<%=Model.ReferenceVideos[i].CoverImagePath %>' alt="图片" />
					<span class="video"></span>
				</a>
				
				<a href="<%=VideoHelper.GetPlayUrl(Model.ReferenceVideos[i]) %>" target="_blank">
					<%=StringUtility.CutString(Model.ReferenceVideos[i].Name,21)%>
				</a>
				<% if (Model.VideoListStyle == EnumVideoListStyle.vertical)
				{ %>
				<div class="videoSplitLine"></div>
				<%} %>
			</li>
		<%} %>
		</ul>
	</div>
	<div style="clear:left;"></div>
	
	<script type="text/javascript">

		$(document).ready(
			function() {
				$(".videoSplitLine:last").attr("style", "display:none");
				if ($.browser.msie) {
					if ($.browser.version == "7.0") {

					}
					if ($.browser.version == "6.0") {
						//$("#divRefTagVideo").attr("style", "height:600px;");
					}
				}
			}
		);
	
	
	</script>
	
	<style type="text/css">

		
		ul
		{
			line-height:1.2em;
		}
		
		
		/*视频框*/
		.gallery {
			list-style: none;
			margin: 0;
			padding: 0;
		}
		.gallery li {
			margin: 0px 2px;
			padding: 0;
			float: left;
			position: relative;
			height: 140px;
		}
		.gallery img {
			background: #fff;
			border: solid 1px #ccc;
			padding: 4px;
		}
		.gallery span {
			width: 20px;
			height: 18px;
			display: block;
			position: absolute;
			bottom: 50px;
			right: 15px;
			
		}
		.gallery .video {
			background: url(/images/video.gif) no-repeat;
		}
		
		.gallery .favorite {
			background: url(/images/favorite.gif) no-repeat;
		}
		.gallery a {
			text-decoration: none;
			width:180px;
			height:131px;
			color:#124C9A;
			font-size:12px;
		}
		.gallery a:hover
		{
			color:Red;
			text-decoration:underline;
		}
		.gallery a:hover img  {
			border-color: #ffaa28;
		}
		.gallery a:hover span{
			background-position:left -22px;
		}
		
	
	</style>
	
	
